import type React from 'react';
import {
  attachShape,
  detachShape,
  getShape,
} from '@/components/MapView/Mapless/mana/shape';
import styles from '../../index.module.less';
import type { TestControlProps } from '../types';

const Index: React.FC<TestControlProps> = ({ maplessRef }) => {
  const onDrawShape = () => {
    const sMan = attachShape(maplessRef.current, 'sm1');
    sMan?.drawShape('shape1', {
      coordinates: [
        [113.266, 23.131],
        [113.276, 23.141],
        [113.277, 23.122],
        [113.266, 23.131],
      ],
      fillColor: 'rgba(255,0,0,0.1)',
      outlineColor: '#ff0000',
    });
  };

  const onShowShape = () => {
    const sMan = getShape(maplessRef.current, 'sm1');
    sMan?.setVisible(!sMan.IsVisible);
  };

  const onClearShape = () => {
    detachShape(maplessRef.current, 'sm1');
  };

  return (
    <div className={styles.test}>
      <button type="button" onClick={onDrawShape}>
        绘制形状
      </button>
      <button type="button" onClick={onShowShape}>
        显示/隐藏
      </button>
      <button type="button" onClick={onClearShape}>
        清除形状
      </button>
    </div>
  );
};

export default Index;
